<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
  <![endif]-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="assets/css/ace.min.css" />
  <link rel="stylesheet" href="css/style.css"/>
<title>已响应询价</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        #arlet{
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed; /* 添加固定定位 */
            top: 50%; /* 从顶部50%位置开始 */
            left: 50%; /* 从左侧50%位置开始 */
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
<div id="app">
<div class="page-content">
<h3 class="header smaller lighter blue">已响应询价</h3>
      <div class="search_style">
   <div class="title_names">搜索查询</div>
      <ul class="search_content clearfix">
          <li><label class="lf">项目名称</label><input name="项目名称" type="text"  class="text_add" v-model="searchObj.project_name"/></li>
          <li><label class="lf">订单编号</label><input name="订单编号" type="text"  class="text_add" v-model="searchObj.o_number"/></li>
          <li style="width:90px;"><button  type="button" class="btn_search" @click="searchAll()">查询</button></li>
      </ul>
    </div>
  <div class="">
  <table id="" class="table table-striped table-bordered table-hover">
   <thead>
    <tr><th>序号</th>
        <th>项目名称</th>
        <th>项目编号</th>
        <th>预计加油时间</th>
        <th>加油地点</th>
        <th>报价截止时间</th>
        <th>操作</th>
    </tr>
   </thead>
   <tbody>
   <tr v-for="(i,index) in zData">
       <td>{{i.o_id}}</td><td>{{i.project_name}}</td>
       <td>{{i.o_number}}</td><td>{{i.prime_date}}</td>
       <td>{{i.place}}</td><td>{{i.cut_time}}</td>
       <td><a href="#" class="btn btn-primary gys_bz" @click.prevent="quoted(i.o_id,index)">修改</a></td>
   </tr>

   </tbody>
  </table>
      <div class="page_style">
          <div class="block">
              <span class="demonstration">完整功能</span>
              <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="page"
                      :page-sizes="[10, 15, 20]"
                      :pageSize="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total=total>
              </el-pagination>
          </div>
      </div>
  </div>
 </div>

    <el-dialog
            title="提示"
            :visible.sync="show"
            width="30%"
            :before-close="handleClose">
    <div class="Rankings_style" >
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <th width="">产品名称</th>
            <th width="">采购数量</th>
            <th width="">供应商报价（元/吨）</th>
            <th width="">小计（元）</th>
            <th width="">合计（元）</th>
            <th width="">合同附件</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td colspan="4" class="table_jiage">
                    <table width="100%" cellpadding="0" cellspacing="0" >
                        <tr style=" border-bottom:1px solid #ddd" v-for="j in modulesData">
                            <td width="">{{j.breed}}</td>
                            <td width="">{{j.purchase_quantity}}</td>
                            <td width=""><input  type="text" style=" margin:5px;" v-model="j.price"/></td>
                            <td width="">{{j.purchase_quantity*j.price}}</td>
                        </tr>
                    </table>
                <td>{{numTotal}}</td>
                <td ><button type="button" class="btn btn-info File_Scan">浏览</button></td>
            </tr>
            </tbody>
        </table>
    </div>

        <span slot="footer" class="dialog-footer">
    <el-button @click="cancel()">取 消</el-button>
    <el-button type="primary" @click="evaluation()">确 定</el-button>
  </span>
    </el-dialog>





</div>
	<!--[if !IE]> -->
		<script src="assets/js/jquery.min.js"></script>
		<!-- <![endif]-->
		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/layer/layer.js" type="text/javascript" ></script>
<script src="assets/laydate/laydate.js" type="text/javascript"></script>
<script type="text/javascript">
 //弹出一个iframe层

//$('.gys_bz').on('click', function(){
//    layer.open({
//        type: 2,
//        title: '供应商项目报价',
//        maxmin: true,
//        shadeClose: true, //点击遮罩关闭层
//        area : ['980px' , '400px'],
//        content: '供应商报价.html'
//    });
//});

laydate({
    elem: '#start',
    event: 'focus' 
});
/***判断用户添加文本**/
 jQuery(document).ready(function(){  
 
  $("#btn_search").click(function(){
	// var num=0;
     var str="";
     $("input[type$='text'],select").each(function(n){
          if($(this).val()=="")
          {
              // num++;
			   layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                title: '提示框',				
				icon:0,				
          }); 
             // layer.msg(str+=""+$(this).attr("name")+"不能为空！\r\n");
             layer.close(index);
          }
		  
     });
    
});
 });
</script>

<script>
    new Vue({
        el:"#app",
        data:{
            //总数据
            zData:[],

            //搜索对象
            searchObj:{
                o_type:'待确认',
                project_name:'',
                o_number:'',
                prime_date:''
            },
            //当前页数
            page:1,
            //每页显示数
            pageSize:10,
            //总条目数
            total:0,
            //搜索状态
            searchStatus:false,
            show:false,
            //弹窗数据
            modulesData:[],
            //选中的o_id
            o_id:0
        },
        methods:{
            getInfo(){
                axios.get("orders/待确认/"+(this.page-1)*this.pageSize+"/"+this.pageSize+"/ordersType.do").then(dt => {
                    console.log(dt.data)
                    this.zData = [];
                    for (let i = 0; i < dt.data.length; i++) {
                        let comData = {
                            o_id: dt.data[i].o_id,
                            project_name: dt.data[i].project_name,
                            o_number: dt.data[i].o_number,
                            prime_date: dt.data[i].prime_date,
                            place: dt.data[i].place,
                            boat_name: dt.data[i].boat_name,
                            m_id: dt.data[i].m_id,
                            cut_time: dt.data[i].cut_time,
                        };
                        this.zData.push(comData);
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize=val
                this.getInfo()
            },
            handleCurrentChange(val) {
                this.page=val
                this.getInfo()
            },
            searchAll(){
                if (this.searchObj.project_name.trim() !== '' | this.searchObj.o_number.trim() !== '' || this.searchObj.prime_date.trim() !== '') {
                    axios.get("orders/searchAll.do", {
                        params: this.searchObj
                    })
                        .then(dt => {
                            this.searchStatus=true
                            this.zData = [];
                            for (let i = 0; i < dt.data.length; i++) {
                                let comData = {
                                    o_id: dt.data[i].o_id,
                                    project_name: dt.data[i].project_name,
                                    o_number: dt.data[i].o_number,
                                    prime_date: dt.data[i].prime_date,
                                    place: dt.data[i].place,
                                    boat_name: dt.data[i].boat_name,
                                    m_id:dt.date[i].m_id,
                                    cut_time: dt.data[i].cut_time,
                                };
                                this.zData.push(comData);
                            }
                        })
                } else {
                    this.$message({
                        type: 'info',
                        message: '您还没有输入值'
                    });
                }
            },
            quoted(o_id,i){
                let currentDate = new Date();
                let nowDate= new Date(this.zData[i].cut_time)
                this.o_id=o_id
                if(currentDate < nowDate) {
                    axios.get("modules/OrderDetailedId.do?o_id=" + o_id).then(dt => {
                        this.modulesData = dt.data
                        this.show = true
                    })
                }else {
                    this.$message({
                        type: 'info',
                        message: '报价截止时间已过无法进行修改！'
                    });
                }

            },
            evaluation(){

                for (let i = 0; i < this.modulesData.length; i++) {
                    let breed=encodeURIComponent(JSON.stringify(this.modulesData[i].breed))
                    axios.get("modules/updateODPrice.do?o_id="+this.o_id+"&breed="+breed+"&price="+this.modulesData[i].price)
                }
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.show=false
            },
            cancel(){
                this.show=false
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }

        },
        mounted(){
            axios.get("orders/待确认/total.do").then(dt =>{
                this.total=dt.data
            })
            this.getInfo();
        },
        computed: {
            elementStyle() {
                return {
                    display: this.show ? 'block' : 'none'
                };
            },
            numTotal() {
                    let a = 0;
                    for (let j = 0; j < this.modulesData.length; j++) {
                        a += this.modulesData[j].purchase_quantity*this.modulesData[j].price
                    }
                    return a;
            }
        },
    })
</script>
</body>
</html>
